<html>
    <head>
        <meta charset="utf-8">
        <title>图层组（LayerGroup)</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 1. 添加ChineseTmsProvider插件的引用-->
        <script type="text/javascript" src="../lib/plugins/leaflet.ChineseTmsProvider.js"></script>

        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){


                //1. 创建天地图的Satellite.Map图层
                var satem = L.tileLayer.chinaProvider(
                                    'TianDiTu.Satellite.Map',{
                                        maxZoom: 18,        
                                        minZoom: 5
                                 });

                //2. 创建天地图的Satellite.Annotion图层
                var satea = L.tileLayer.chinaProvider(
                                    'TianDiTu.Satellite.Annotion',{
                                        maxZoom: 18,        
                                        minZoom: 5
                                 });

                //3. 创建LayerGroup，设置satem和satea图层为Group成员
                var sate = L.layerGroup([satem, satea]);

                //4. 创建地图，设置map的layers属性值为sate
                map = L.map("mapDiv", { 
                    center: [39.90,116.39],
                    zoom: 5,
                    layers : sate
                });

            }
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



